<template>
  <div class="shipping-tracking">
    <div v-if="tracking" class="tracking-info">
      <div class="tracking-header">
        <div class="company-info">
          <span class="label">物流公司：</span>
          <span>{{ logisticsCompanyText[tracking.company] }}</span>
        </div>
        <div class="tracking-no">
          <span class="label">物流单号：</span>
          <span>{{ tracking.trackingNo }}</span>
          <el-button type="text" @click="copyTrackingNo">复制</el-button>
        </div>
      </div>
      
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in tracking.activities"
          :key="index"
          :timestamp="formatDate(activity.time)"
          :type="index === 0 ? 'primary' : ''"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <div v-else class="no-tracking">
      暂无物流信息
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/utils/date'

const props = defineProps({
  orderId: {
    type: [String, Number],
    required: true
  }
})

const store = useStore()
const tracking = ref(null)

const logisticsCompanyText = {
  SF: '顺丰快递',
  ZTO: '中通快递',
  YTO: '圆通快递'
}

const loadTracking = async () => {
  try {
    const response = await store.dispatch('shipping/getShippingTracking', props.orderId)
    tracking.value = response
  } catch (error) {
    ElMessage.error('加载物流信息失败')
  }
}

const copyTrackingNo = () => {
  if (tracking.value?.trackingNo) {
    navigator.clipboard.writeText(tracking.value.trackingNo)
    ElMessage.success('物流单号已复制')
  }
}

onMounted(() => {
  loadTracking()
})
</script>

<style scoped>
.shipping-tracking {
  padding: 20px;
}

.tracking-header {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.company-info,
.tracking-no {
  margin: 5px 0;
}

.label {
  color: #666;
  margin-right: 10px;
}

.no-tracking {
  text-align: center;
  color: #999;
  padding: 30px 0;
}
</style> 